<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link href="resources/bootstrap-3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <h:outputStylesheet library="bootstrap-3.1.1" name="css/bootstrap-theme.min.css" />
        <!--
        <link href="resources/bootstrap-3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="resources/bootstrap-3.1.1/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
        -->

        <link href="resources/css/login-1.0.css"/>
        <style>
            .ui-widget {
                font-size:13px !important;
            }
        </style>
    </h:head>
    <h:body>
        <p:growl autoUpdate="true" showDetail="true" />
        <div class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!--
                    <a class="navbar-brand" href="#"><img src="img/logo.png" /></a>
                    -->
                </div>
                <nav class="collapse navbar-collapse" role="navigation">

                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-home"></i> Nosotros</a>
                        </li>
                        <li>
                            <a href="#"><span class="badge">
                                    <i class="glyphicon glyphicon-user"></i> Contactenos</span></a>
                        </li>
                    </ul>

                </nav>
            </div>
        </div>

        <div class="container" id="wrap" style="padding-top: 10%;">

            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div id="validation-errors" style="display:none"></div>
                    <div class="panel panel-default">
                        <div align="center">
                            <strong>
                                <h3>Sistema de Seguridad</h3>
                            </strong>
                        </div>
                        <div class="panel-body" id="success">
                            <div class="row">
                                <div class="col-md-4" align="center">
                                    <p:graphicImage value="resources/images/seguridad.jpg" width="200" height="160"/>
                                </div>
                                <div class="col-md-8" id="bor-right" >
                                    <h:form class="form-horizontal" id="login" >
                                        <div class="form-group">
                                            <label for="email" class="col-sm-4 control-label">Usuario</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" required="true" 
                                                       jsf:value="#{loginController.userName}"/>

                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="password" class="col-sm-4 control-label">Contraseña</label>
                                            <div class="col-sm-8">
                                                <input type="password" required="true" class="form-control"
                                                       jsf:value="#{loginController.userPassword}"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-4 col-sm-8">
                                                <p:commandButton styleClass="btn btn-default btn-primary" 
                                                                 id="btn-login" ajax="false"
                                                                 value="Ingresar"
                                                                 action="#{loginController.logIn()}">
                                                    <f:setPropertyActionListener
                                                        target="#{navigationController.navigationContent}"
                                                        value="./pages/home.xhtml" />
                                                </p:commandButton>

                                            </div>
                                        </div>
                                    </h:form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <h:outputScript name="js/bootstrap.min.js" library="bootstrap-3.1.1" />
    </h:body>
</html>

